import { Component } from 'react';
import classNames from 'classnames';
import styles from './index.less';
import { FormGroup,InputGroup,Button,Alert,Toaster } from "@blueprintjs/core";
import router from 'umi/router';
import { isAccountOnline,login } from '../../api/sign.js';

export default class Login extends Component {
    constructor(props) {
        super(props);
		this.toaster = React.createRef();
		window.nnn = this;
		this.state = {
			account: '',
			accountMsg: '',
			password: '',
			passwordMsg: '',
			alertOpen: false
		}
    }

    componentWillMount() {
        //加载前检查是否登录
        isAccountOnline((isLogined) => {
            if(isLogined) {
                router.push('admin');
            }
        });
		/* this.toaster.show({
			icon: "ban-circle",
			intent: "danger",
			message: "You cannot undo the past.",
		}) */
    }

	login() {
		// this.checkForm();
		const {account, password} = this.state;
		let isValidate = true;
		if(!account) {
			this.setState({accountMsg: '用户名不能为空'});
			isValidate = false;
		}
		if(!password) {
			this.setState({passwordMsg: '密码不能为空'});
			isValidate = false;
		}
		if(!isValidate) return;
		this.setState({accountMsg:'', passwordMsg: ''});
		login(
			{
				name: account,
				password: password,
				error: data => {
					this.setState({
						accountMsg: data.nameMsg,
						passwordMsg: data.passwordMsg
					});
				}
			}
		)
	}

	handleUserChange(e) {
		if(!e.target.value) {
			this.setState({
				user: {
					value: "",
					helperText: "请填写用户名",
					intent: "danger"
				}
			})
			return;
		}
		this.setState({
			user: {
				value: e.target.value,
				helperText: "",
				intent: null
			},
		})
	}

	handlePsdChange(e) {
		if(!e.target.value) {
			this.setState({
				psd: {
					value: "",
					helperText: "请填写密码",
					intent: "danger"
				}
			})
			return;
		}
		this.setState({
			psd: {
				value: e.target.value,
				helperText: "",
				intent: null
			},
		})
	}

    render() {
		const {account, password, accountMsg, passwordMsg} = this.state;
        return (
			<div className="dm-login">
				<form action='javascript:;' onSubmit={() => {this.login()}}>
					<div className="dm-form">
						<h1 className="dm-title">场地调查修复一张图系统</h1>
						<h5 className="dm-login-title">用户登录</h5>
						<FormGroup helperText={accountMsg}>
							<InputGroup intent={accountMsg && 'danger'} value={account} onChange={(e) => this.setState({account: e.target.value})} leftIcon="user" fill large placeholder="请输入用户账号" />
						</FormGroup>
						<FormGroup helperText={passwordMsg}>
							<InputGroup intent={passwordMsg && 'danger'} type="password" value={password} onChange={(e) => this.setState({password: e.target.value})} leftIcon="key" fill large placeholder="请输入用户密码" />
						</FormGroup>
						<Button type="submit" fill intent="primary" large>登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</Button>
					</div>
				</form>
				<Alert className="noFoot"
					intent="danger"
					isOpen={this.state.alertOpen}
				>
					<p>
						登录成功,即将跳转至首页.
					</p>
				</Alert>
				<Toaster {...this.state} ref={this.toaster} />
			</div>
        )
    }
}
